<script setup lang="ts">
import { setSongLikeService} from '@/apis/music'
import { useAudioPlayerStore, usePlayListStore, useOverViewStore ,useMyLikeListStore ,useRecentlyStore ,useAllMusicStore} from "@/stores"
const audioPlayer = useAudioPlayerStore()
const playList = usePlayListStore()
const overView = useOverViewStore()
const myLikeListStore = useMyLikeListStore()
const recentlyStore = useRecentlyStore()
const allMusicStore = useAllMusicStore()

const props = defineProps({
  songId: {
    required: true,
    type: String
  },
  liked: {
    required: false,
    type: Boolean,
    default: false
  },
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})

const handleLike = async () => {
  if(props.songId !== '0')
  {
    const res = await setSongLikeService(props.songId)
    audioPlayer.setLike(props.songId,res.data.liked)
    playList.refreshPlayList()
    await overView.initOverView()
    myLikeListStore.refreshPlayList()
    recentlyStore.refreshPlayList()
    allMusicStore.setLike(props.songId,res.data.liked)
  }

}

</script>

<template>
  <div class="icon-btn-unlike" v-if="liked" @click="handleLike">
  </div>
  <div :class="themeDarkStyle? 'icon-btn-like dark': 'icon-btn-like'" v-else @click="handleLike">
  </div>

</template>

<style lang="scss" scoped>

.icon-btn-like{
  background: url(@/assets/qqimgs/mod_icon_light.svg) -100px -20px;
  height: 14px;
  width: 16px;
  cursor: pointer;

  &:hover{
    background: url(@/assets/qqimgs/mod_icon_light.svg) -500px -20px;
  }
}

.dark{
  background: url(@/assets/qqimgs/mod_icon_light.svg) -500px 0;

}

.icon-btn-unlike{
  background: url(@/assets/qqimgs/mod_icon_light.svg) -100px 0;
  height: 14px;
  width: 16px;
  cursor: pointer;
  &:hover{
    color: #F66;

  }
}
</style>